<!--  固定表 -->
<template>
  <div>
    <div class="flex">
      <div class="flex-left">
        <div class="navigationBar">
          <label>标准属性表目录</label>
          <span @click="showFolder()"
            ><i class="el-icon el-icon-circle-plus"></i
          ></span>
        </div>
        <div class="flex-tree">
          <div
            :class="tableIndex == item.Id ? 'hover tree-item' : 'tree-item'"
            v-for="item in tableList"
            v-bind:key="item.Id"
            @click="tableClick(item)"
          >
            {{ item.FolderName }}

            <i class="el-icon-delete delete" @click="deleteFolder(item)"></i>
            <i class="el-icon-edit edit" @click="editFolder(item)"></i>
          </div>

          <!-- <div
						v-if="tableList.length == 0"
						style="text-align: center; margin-top: 100px; color: #666"
					>
						暂无数据
					</div> -->
        </div>
      </div>
      <div class="flex-right">
        <div class="flex-right-item">
          <navigationBarCustom customTitle="标准属性表名称">
            <div class="searchContent">
              <!-- <el-input
								v-model="username"
								placeholder="请输入字段名称"
								size="mini"
								style="width: 150px; margin-right: 10px"
							></el-input>
							<custom-button
								type="search"
								style="margin-right: 10px"
								@searchClick="searchClick"
							></custom-button>
							<custom-button
								type="reset"
								style="margin-right: 10px"
								@resetClick="resetClick"
							></custom-button> -->
              <custom-button
                type="add"
                style="margin-right: 10px"
                @addClick="addTableClick"
              ></custom-button>
              <el-button
                size="mini"
                style="
                  margin-right: 10px;
                  background-color: #fc6a6e;
                  color: #fff;
                  border: none;
                "
                @click="deleteTableAll"
              >
                <i class="el-icon-delete"></i> 批量删除
              </el-button>
            </div>
          </navigationBarCustom>
          <div style="margin-top: 10px">
            <tableHeightIndex
              :dataSource="dataSource"
              :tableColumns="tableColumns"
              :btnList="btnList"
              :pageSize="pageSize"
              :pageCount="pageCount"
              :pageNo="pageNo"
              @pageChange="pageChange"
              @editRow="editTableRow"
              @viewRow="viewRow"
              @deleteRow="deleteTableRow"
              btnListWidth="100"
              selection
              :height="400"
              @handleSelectionChange="handleTableSelectionChange"
              @handleClickTableRow="handleTableClickTableRow"
            ></tableHeightIndex>
          </div>
        </div>
        <div class="flex-right-item" style="margin-top: 10px">
          <navigationBarCustom :customTitle="customTitle">
            <div class="searchContent">
              <!-- <el-input
								v-model="username"
								placeholder="请输入字段名称"
								size="mini"
								style="width: 150px; margin-right: 10px"
							></el-input>
							<custom-button
								type="search"
								style="margin-right: 10px"
								@searchClick="searchClick"
							></custom-button>
							<custom-button
								type="reset"
								style="margin-right: 10px"
								@resetClick="resetClick"
							></custom-button> -->
              <custom-button
                type="add"
                style="margin-right: 10px"
                @addClick="addClick"
              ></custom-button>
              <el-button
                size="mini"
                style="
                  margin-right: 10px;
                  background-color: #fc6a6e;
                  color: #fff;
                  border: none;
                "
                @click="deleteFixedAll"
              >
                <i class="el-icon-delete"></i> 批量删除
              </el-button>
            </div>
          </navigationBarCustom>
          <tableHeightIndex
            :dataSource="dataYzzdSource"
            :tableColumns="tableColumnsDown"
            :btnList="btnFixedList"
            :pageSize="pageSize"
            :pageCount="pageCount"
            :pageNo="pageNo"
            @pageChange="pageChange"
            @editRow="editRow"
            @viewRow="viewRow"
            @deleteRow="deleteFixedRow"
            btnListWidth="60"
            selection
            :height="secondTableHeight"
            @handleSelectionChange="handleSelectionChange"
          ></tableHeightIndex>
        </div>
      </div>
    </div>

    <div v-if="dialogShow">
      <custom-dialog
        :title="dialogTitle"
        size="large"
        @dialogClose="dialogClose"
      >
        <div class="singleTable">
          <div class="select">
            <div
              v-for="item in yzzdSelect"
              v-bind:key="item.Id"
              class="itemDiv"
            >
              <div
                class="item"
                v-if="typeof item.type == 'undefined' || item.type != 2"
              >
                {{ item.TableName }}
              </div>
            </div>
          </div>
          <div class="selectMain">
            <div class="selectLeft">
              <div class="selectLeftWrapper">
                <el-tree
                  :data="data"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  :highlight-current="true"
                ></el-tree>
              </div>
            </div>
            <div class="selectRight">
              <singleTable
                :dataSource="yzzdDatasource"
                :tableColumns="yzzdTableColumns"
                height="500px"
                :selectItems="yzzdSelect"
                @singleHandleSelectionChange="singleHandleSelectionChange"
              ></singleTable>
            </div>
          </div>
        </div>
        <div class="singleBtn">
          <el-button
            size="small"
            type="primary"
            style="margin-right: 10px; color: #fff"
            @click="singleBtnClick"
          >
            <i class="el-icon-check"></i> 勾选确定
          </el-button>
        </div>
      </custom-dialog>
    </div>

    <div v-if="dialogFolderShow">
      <custom-dialog
        :title="dialogFolderTitle"
        size="large"
        @dialogClose="dialogFolderClose"
      >
        <form-index
          :formConfig="formConfigFolder"
          @submit="folderSubmit"
          :type="typeFolder"
          @formInputChange="formInputFolderChange"
          ref="form"
        >
        </form-index>
      </custom-dialog>
    </div>

    <div v-if="dialogTableShow">
      <custom-dialog
        :title="dialogTableTitle"
        size="large"
        @dialogClose="dialogTableClose"
      >
        <form-index
          :formConfig="formTableConfig"
          @submit="tableSubmit"
          :type="tableType"
          @formInputChange="formInputChange"
          ref="form"
        >
        </form-index>
      </custom-dialog>
    </div>
  </div>
</template>

<script>
import { presetFieldsForm } from "@/assets/form/managementCenter/expandManage/presetFieldsForm";
import { resourceFolderForm } from "@/assets/form/managementCenter/resourceFolderForm";
import { tableForm } from "@/assets/form/managementCenter/tableForm";
import customDialog from "@/components/customComponents/customDialog";
import customButton from "@/components/customComponents/customForm/customButton";
import formIndex from "@/components/customComponents/customForm/formIndex";
import singleTable from "@/components/customComponents/customeTable/singleTable.vue";
import tableHeightIndex from "@/components/customComponents/customeTable/tableHeightIndex.vue";
import navigationBarCustom from "@/components/customComponents/managementCenter/navigationBarCustom.vue";
import { AjaxCommon } from "@/libs/apiCommon";
import { PopupCommon } from "@/libs/popupCommon";
import { SessionCommon } from "@/libs/sessionCommon";
import { Utility } from "@/libs/utility";
export default {
  components: {
    customButton,
    customDialog,
    singleTable,
    navigationBarCustom,
    formIndex,
    tableHeightIndex,
  },
  data() {
    return {
      inter: null,
      customTitle: "关联固定表",
      selectTableItem: [],
      yzId: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      dataYzzdSource: [],
      dialogFolderShow: false,
      formConfigFolder: resourceFolderForm,
      typeFolder: "add",
      dialogFolderTitle: "新增目录",
      secondTableHeight: document.body.clientHeight - 603,
      yzzdDatasource: [],
      yzzdSelect: [],
      yzzdFixedSelect: [],
      yzzdTableColumns: [
        {
          prop: "TableName",
          label: "固定表名称",
        },
      ],
      tableIndex: "",
      tableList: [],
      selectItem: [],
      username: "",
      // table 相关参数  begin
      dataSource: [],
      tableColumns: [
        {
          prop: "TableName",
          label: "标准属性表名称",
        },
        {
          prop: "description",
          label: "描述",
        },
      ],
      tableColumnsDown: [
        {
          prop: "TableName",
          label: "固定表名称",
        },
        {
          prop: "description",
          label: "固定表描述",
        },
      ],
      btnList: ["edit", "delete"],
      btnFixedList: ["delete"],
      pageSize: 20,
      pageCount: 100,
      pageNo: 1,
      // table 相关参数  end

      // 弹窗是否显示
      dialogShow: false,
      // 弹窗标题 (新增修改不同)
      dialogTitle: "",

      // form的配置信息
      formConfig: presetFieldsForm,
      type: "add",
      tableItem: {},

      formTableConfig: tableForm,
      dialogTableShow: false,
      dialogTableTitle: "新增标准属性表",
      tableType: "add",
    };
  },
  methods: {
    handleTableSelectionChange(d) {
      this.selectTableItem = d;
    },
    deleteFixedAll() {
      if (this.selectItem.length == 0) {
        PopupCommon.notify("info", "请先勾选数据");
        return;
      }
      let self = this;
      var StandardTableId = this.tableItem.Id;
      var isTrue = true;
      var msg = "";
      PopupCommon.confirm("此操作将删除选择的数据, 是否继续?")
        .then(() => {
          self.selectItem.forEach((d) => {
            const id = d.Id;
            var params = `?StandardTbID=${StandardTableId}&FixTbID=${id}`;
            AjaxCommon(`/api/TableRelation/Delete${params}`, "delete", {
              optReason: "",
            }).then((res) => {
              if (res.data.status != 200) {
                isTrue = false;
                msg = res.data.msg;
              }
            });
          });
          setTimeout(() => {
            if (isTrue) {
              PopupCommon.notify("success", "删除成功");
              self.initDownYzzd();
            } else {
              PopupCommon.notify("error", msg);
            }
          }, 500);
        })
        .catch(() => {
          // 这里尽量写下，否则会报警告异常。
          console.log("已取消删除");
        });
    },
    deleteTableAll() {
      this.tableItem = {};
      if (this.selectTableItem.length == 0) {
        PopupCommon.notify("info", "请先勾选数据");
        return;
      }
      let self = this;
      PopupCommon.confirm("此操作将删除选择的数据, 是否继续?")
        .then(() => {
          self.selectTableItem.forEach((d) => {
            const id = d.Id;
            AjaxCommon("/api/table/Delete?id=" + id, "delete", {
              optReason: "",
            }).then((res) => {
              console.log(res, "res................................");
            });
          });
          setTimeout(() => {
            PopupCommon.notify("success", "删除成功");
            self.initPage();
          }, 500);
        })
        .catch(() => {
          // 这里尽量写下，否则会报警告异常。
          console.log("已取消删除");
        });
    },
    deleteTableRow(d) {
      this.tableItem = {};
      const id = d.data.Id;
      let self = this;
      AjaxCommon("/api/table/Delete?id=" + id, "delete", {
        optReason: d.optReason,
      }).then((res) => {
        console.log(res, "res...............");
        if (res.data.status == 200) {
          PopupCommon.notify("success", "删除成功");
          self.initPage();
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    editTableRow(d) {
      if (this.tableIndex == "") {
        PopupCommon.notify("info", "请先选择左侧的标准属性表目录");
        return;
      }
      let formConfigItem = this.formTableConfig;
      console.log(formConfigItem, "formConfigItem....");
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            if ("FolderName" == t[res]) {
              t.filedValue = d.data["TableName"];
            } else {
              t.filedValue = d.data[t[res]];
            }
          }
        });
      });
      this.formTableConfig = formConfigItem;
      this.tableType = "edit";
      this.dialogTableShow = true;
      this.dialogTableTitle = "编辑标准属性表";
    },
    tableSubmit(d) {
      let self = this;
      var params = `?FolderId=${this.tableIndex}&TableName=${d.FolderName}&TableType=2&description=${d.description}`;
      if (d.Id) {
        params += `&Id=${d.Id}`;
      }
      console.log(d, params, self);
      if (d.Id) {
        AjaxCommon("/api/table" + params, "post", {})
          .then((res) => {
            if (res.data.status == 200) {
              PopupCommon.notify("success", "编辑成功");
              self.initPage();
              self.dialogTableClose();
            } else {
              PopupCommon.notify("error", res.data.msg);
            }
          })
          .catch((err) => {
            PopupCommon.notify("error", err.message);
          });
      } else {
        AjaxCommon("/api/table" + params, "post", {})
          .then((res) => {
            if (res.data.status == 200) {
              PopupCommon.notify("success", "新增成功");
              self.initPage();
              self.dialogTableClose();
            } else {
              PopupCommon.notify("error", res.data.msg);
            }
          })
          .catch((err) => {
            PopupCommon.notify("error", err.message);
          });
      }
    },
    dialogTableClose() {
      this.dialogTableShow = false;
    },
    addTableClick() {
      // this.tableItem = {};
      if (this.tableIndex == "") {
        PopupCommon.notify("info", "请先选择左侧的标准属性表目录");
        return;
      }
      let formConfigItem = this.formTableConfig;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = "";
          }
        });
      });
      this.formTableConfig = formConfigItem;
      this.tableType = "add";
      this.dialogTableShow = true;
      this.dialogTableTitle = "新增标准属性表";
    },
    handleTableClickTableRow(d) {
      this.tableItem = d;
      this.customTitle = `关联固定表【${d.TableName}】`;
      this.initDownYzzd();
    },
    initDownYzzd() {
      let self = this;
      var StandardTableId = this.tableItem.Id;
      if (typeof StandardTableId == "undefined") {
        self.dataYzzdSource = [];
        // 初始化赋值
        self.yzzdFixedSelect = [];
        self.yzzdSelect = [];
        return;
      }
      console.log(StandardTableId, "StandardTableId....");
      // 差个搜索功能
      var params = `StandardTableID=` + StandardTableId;
      AjaxCommon(`/api/TableRelation?${params}`, "get", null).then((res) => {
        console.log(res, "res....");
        if (res.data.status == 200) {
          self.dataYzzdSource = res.data.response;
          // 初始化赋值
          self.yzzdFixedSelect = res.data.response;
          self.yzzdSelect = res.data.response;
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    handleNodeClick(data) {
      this.yzId = data.id;
      // TODO...............
      this.initLeftPage();
    },
    editFolder(item) {
      console.log(item, "item.....");
      let formConfigItem = this.formConfigFolder;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = item[t[res]];
          }
        });
      });
      this.formConfigFolder = formConfigItem;
      this.typeFolder = "edit";
      this.dialogFolderTitle = "编辑目录";
      this.dialogFolderShow = true;
    },
    deleteFolder(item) {
      let self = this;
      const id = item.Id;
      console.log(item, "item");
      PopupCommon.confirm(`确定删除【${item.FolderName}】？`)
        .then(() => {
          AjaxCommon("/api/folder/Delete?id=" + id, "delete", {
            optReason: "删除",
          }).then((res) => {
            console.log(res, "res...............");
            if (res.data.status == 200) {
              PopupCommon.notify("success", "删除成功");
              // 清空关联固定表以及名称  TODO...........
              self.tableItem = {};
              self.customTitle = `关联固定表`;

              self.initLeftFolder(() => {
                self.initPage();
              });
              self.dialogFolderClose();
            } else {
              PopupCommon.notify("error", res.data.msg);
            }
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    formInputFolderChange(e) {
      console.log(e, "e...................");
    },
    folderSubmit(d) {
      let self = this;
      var params = {
        FolderName: d.FolderName,
        FatherFolderId: 0,
        FolderType: 3,
      };
      var titleOpr = "新增成功";
      if (d.Id) {
        params["Id"] = d.Id;
        titleOpr = "编辑成功";
      }
      AjaxCommon(`/api/folder`, "postForm", params)
        .then((res) => {
          console.log(res, "res..................");
          if (res.data.status == 200) {
            PopupCommon.notify("success", titleOpr);
            self.initLeftFolder(() => {
              self.initPage();
            });
            self.dialogFolderClose();
          } else {
            PopupCommon.notify("error", res.data.msg);
          }
        })
        .catch((err) => {
          PopupCommon.notify("error", err.message);
        });
    },
    initLeftFolder(callback) {
      let self = this;
      self.tableList = [];
      AjaxCommon("/api/folder?folderType=3", "get", null).then((res) => {
        if (res.data.status == 200) {
          self.tableList = res.data.response;
          if (self.tableList && self.tableList.length > 0) {
            this.tableIndex = self.tableList[0].Id;
            callback();
          } else {
            self.tableIndex = "";
            self.tableList = [];
          }
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    dialogFolderClose() {
      this.dialogFolderShow = false;
    },
    showFolder() {
      let formConfigItem = this.formConfigFolder;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = "";
          }
        });
      });
      this.formConfigFolder = formConfigItem;

      this.typeFolder = "add";
      this.dialogFolderTitle = "新增目录";
      this.dialogFolderShow = true;
    },
    singleBtnClick() {
      if (this.yzzdSelect.length == 0) {
        PopupCommon.notify("info", "请选择固定表");
        return;
      }
      var isTrue = true;
      var errorMsg = "";
      var StandardTableId = this.tableItem.Id;
      var params = "";
      // 新增
      this.yzzdSelect.forEach((t) => {
        if (t.type == 1) {
          params = `?StandardTableId=${StandardTableId}&FixTableID=${t.Id}`;
          AjaxCommon("/api/TableRelation" + params, "post", {}).then((res) => {
            console.log(res, "res.............");
            if (res.data.status != 200) {
              isTrue = false;
              errorMsg = res.data.msg;
            }
          });
        }

        // 删除
        if (t.type == 2) {
          params = `?StandardTbID=${StandardTableId}&FixTbID=${t.Id}`;
          AjaxCommon("/api/TableRelation/Delete" + params, "delete", null).then(
            (res) => {
              console.log(res, "res.............");
              if (res.data.status != 200) {
                isTrue = false;
                errorMsg = res.data.msg;
              }
            }
          );
        }
      });
      setTimeout(() => {
        if (isTrue) {
          PopupCommon.notify("success", "操作成功");
          this.initDownYzzd();
        } else {
          PopupCommon.notify("error", errorMsg);
        }
      }, 500);

      this.dialogShow = false;
    },
    singleHandleSelectionChange(e) {
      // // 保留一个原始值和一个动态的值，动态的值，默认为原始值
      // // 这里要去确定是新增的，还是删除的，同时要保留最开始的，取消的时候或者重新打开的时候要还原
      // console.log(
      //   this.yzzdSelect,
      //   e,
      //   this.yzzdDatasource,
      //   "最终值111................."
      // );
      // var yzzdFixedSelect = JSON.parse(JSON.stringify(this.yzzdSelect));
      // var curSelect = yzzdFixedSelect.filter((b) => b.FolderID == this.yzId);
      // if (e && e.length > 0) {
      //   if (curSelect && curSelect.length > 0) {
      //     // 固定表存在,而选择的值不存在了，如果id不存在了就删除
      //     curSelect.forEach((t) => {
      //       if (e.find((b) => b.Id == t.Id) == null) {
      //         Utility.removeByAttr(yzzdFixedSelect, "Id", t.Id);
      //       }
      //     });
      //     // 选择的值存在，而固定表不存在，这时候应该新增
      //     e.forEach((t) => {
      //       if (curSelect.find((b) => b.Id == t.Id) == null) {
      //         yzzdFixedSelect.push(t);
      //       }
      //     });
      //   } else {
      //     // 当前固定表不存在，全部新增
      //     e.forEach((t) => {
      //       yzzdFixedSelect.push(t);
      //     });
      //   }
      // } else {
      //   if (curSelect && curSelect.length > 0) {
      //     curSelect.forEach((t) => {
      //       Utility.removeByAttr(yzzdFixedSelect, "Id", t.Id);
      //     });
      //   }
      // }
      // console.log(yzzdFixedSelect, "最终值2.................");
      // this.yzzdSelect = yzzdFixedSelect;

      // 这里会进多次，其实只需要一定时间内最后一次即可，e为最终选择的行集合
      clearTimeout(this.inter);
      let self = this;
      this.inter = setTimeout(() => {
        console.log(e, "111111111111111111最终");
        // 需要记录新增和删除的，根据左侧
        // TODO...................
        // var oldValue = self.yzzdFixedSelect;
        // dtValue里面的id 相当于 e 里面的 Id
        var dtValue = self.yzzdSelect;
        // currentValue 里面的 FolderID  等于 yzId
        var currentValue = e;
        // 弹窗右侧列表的数据
        var yzzdDatasource = self.dataYzzdSource;
        // 当前弹窗里面左侧的目录id
        // var yzId = self.yzId;
        var addList = [];
        var removeList = [];
        var item = null;
        // 当前分类下选中了几项
        if (currentValue && currentValue.length > 0) {
          // 这里也要分新增和删除

          // 原本不存在，表示新增的；
          currentValue.forEach((t) => {
            item = dtValue.find((b) => b.Id == t.Id);
            if (item == null || typeof item == "undefined") {
              addList.push(t);
            }
          });

          // 原本存在，但是没有返回，表示删除；（这里要区分目录，不是同一个目录的不能删除！！！）
          dtValue.forEach((t) => {
            if (
              e.length > 0 &&
              e.find((b) => b.Id == t.Id) == null &&
              yzzdDatasource.find((b) => b.Id == t.Id) != null
            ) {
              removeList.push(t);
            }
          });
        } else {
          if (yzzdDatasource && yzzdDatasource.length > 0) {
            // 记录删除的
            yzzdDatasource.forEach((t) => {
              item = dtValue.find((b) => b.Id == t.Id);
              if (item != null || typeof item != "undefined") {
                removeList.push(t);
              }
            });
          }
        }

        var finallyValue = [];
        if (addList.length > 0 || removeList.length > 0) {
          // 保留小写的id和name以及type:   1：新增  ， 2：删除  ， 0：保持不变的
          dtValue.map((t) => {
            var isAdd = true;
            // 有的原先为1，新增的
            var type = typeof t.type == "undefined" ? 0 : t.type;
            if (removeList.length > 0) {
              if (removeList.find((b) => b.Id == t.Id) != null) {
                if (type == 1) {
                  isAdd = false;
                }
                type = 2;
              }
            }
            if (isAdd) {
              finallyValue.push({
                Id: t.Id,
                TableName: t.TableName,
                type: type,
                RelationId: t.RelationId,
              });
            }
          });
          if (addList.length > 0) {
            addList.forEach((t) => {
              finallyValue.push({
                Id: t.Id,
                TableName: t.TableName,
                type: 1,
                RelationId: t.RelationId,
              });
            });
          }

          this.yzzdSelect = finallyValue;
        } else {
          // 处理那种原先存在，后来删除，后来又勾上的情况
          dtValue.forEach((t) => {
            if (typeof t.type != "undefined" && t.type == 2) {
              t.type = 0;
            }
            finallyValue.push({
              Id: t.Id,
              TableName: t.TableName,
              type: typeof t.type != "undefined" ? t.type : 0,
              RelationId: t.RelationId,
            });
          });

          this.yzzdSelect = finallyValue;
        }
        // 上面整这么麻烦，因为后台几口只有新增和删除，没有批量修改，根据最终值去覆盖的操作
        console.log(
          addList,
          removeList,
          dtValue,
          finallyValue,
          "新增和删除......"
        );
      }, 500);
    },
    tableClick(item) {
      console.log(item, "item......");
      this.tableIndex = item.Id;
      this.customTitle = `关联固定表`;
      this.initPage();
      this.dataYzzdSource = [];
    },
    handleSelectionChange(d) {
      this.selectItem = d;
      console.log(d);
    },
    formInputChange(e) {
      // if (e.filedName == "idCard") {
      // 	const data = CardId.getInfoByCardId(e.value)
      // 	if (data) {
      // 		let newData = e.allData
      // 		newData["birthday"] = data.birthday
      // 		newData["sex"] = data.sex
      // 		this.$refs.form.changeFormValue(newData)
      // 	}
      // }
      console.log(e);
    },
    submit(d) {
      console.log(d);
      // let self = this
      // console.log(d)
      // if (d.id) {
      // 	AjaxCommon("/ccdc/cfg/device/device/edit", "post", d)
      // 		.then((res) => {
      // 			if (res.data.code == 200) {
      // 				PopupCommon.notify("success", "操作成功")
      // 				self.initPage()
      // 				self.dialogClose()
      // 				this.dialogClose()
      // 			} else {
      // 				PopupCommon.notify("error", res.data.message)
      // 			}
      // 		})
      // 		.catch((err) => {
      // 			PopupCommon.notify("error", err.message)
      // 		})
      // } else {
      // 	delete d.id
      // 	AjaxCommon("/ccdc/cfg/device/device/add", "post", d)
      // 		.then((res) => {
      // 			if (res.data.code == 200) {
      // 				PopupCommon.notify("success", "操作成功")
      // 				self.initPage()
      // 				self.dialogClose()
      // 			} else {
      // 				PopupCommon.notify("error", res.data.message)
      // 			}
      // 		})
      // 		.catch((err) => {
      // 			PopupCommon.notify("error", err.message)
      // 		})
      // }
    },
    dialogClose() {
      this.yzzdSelect = this.yzzdFixedSelect;
      this.dialogShow = false;
    },
    searchClick() {
      this.pageNo = 1;
      this.initPage();
    },
    resetClick() {
      this.username = "";
    },
    addClick() {
      if (typeof this.tableItem.Id == "undefined") {
        PopupCommon.notify("info", "请点击标准属性表列表的一行进行选择");
        return;
      }

      this.type = "add";
      this.dialogShow = true;
      this.dialogTitle =
        "固定表选择（ 标准属性表：【" + this.tableItem.TableName + "】）";
      this.initLeftFolderDialog(() => {
        this.initLeftPage();
      });
    },
    initLeftPage() {
      var id = this.yzId;
      let self = this;
      AjaxCommon(`/api/table?tableType=1&key=${id}`, "get", null).then(
        (res) => {
          if (res.data.status == 200) {
            self.yzzdDatasource = res.data.response;
          } else {
            PopupCommon.notify("error", res.data.msg);
          }
        }
      );
    },
    initLeftFolderDialog(callback) {
      let self = this;
      self.data = [];
      AjaxCommon("/api/folder/GetFullFolder?FolderType=2", "get", null).then(
        (res) => {
          if (res.data.status == 200) {
            let treeDataList = [];
            Utility.createTreeData(res.data.response, treeDataList);
            self.data = treeDataList;
            if (treeDataList && treeDataList.length > 0) {
              self.yzId = treeDataList[0].id;
              callback && callback();
            } else {
              self.yzId = "";
              self.yzzdDatasource = [];
            }
          } else {
            PopupCommon.notify("error", res.data.msg);
          }
        }
      );
    },
    // 分页点击事件
    pageChange(p) {
      this.pageNo = p;
      this.initPage();
    },
    editRow(d) {
      this.type = "edit";
      let formConfigItem = this.formConfig;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = d.data[t[res]];
          }
        });
      });
      this.formConfig = formConfigItem;
      this.dialogShow = true;
      this.dialogTitle =
        "编辑" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title;
    },
    viewRow(d) {
      this.type = "look";
      let formConfigItem = this.formConfig;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = d.data[t[res]];
          }
        });
      });
      this.formConfig = formConfigItem;
      this.dialogShow = true;
      this.dialogTitle =
        "查看" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title;
    },
    deleteFixedRow(d) {
      var tableItem = this.tableItem;
      const id = d.data.Id;
      let self = this;
      var params = `?StandardTbID=${tableItem.Id}&FixTbID=${id}`;
      AjaxCommon(`/api/TableRelation/Delete${params}`, "delete", {
        optReason: "",
      }).then((res) => {
        if (res.data.status == 200) {
          PopupCommon.notify("success", "删除成功");
          self.initDownYzzd();
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    // 初始化事件
    initPage() {
      // 差个搜索功能
      let self = this;
      AjaxCommon(
        `/api/table?tableType=2&key=${this.tableIndex}`,
        "get",
        null
      ).then((res) => {
        if (res.data.status == 200) {
          if (res.data.response) {
            self.dataSource = res.data.response;
            // 初始化赋值
          } else {
            self.dataSource = [];
          }

          self.yzzdFixedSelect = [];
          self.yzzdSelect = [];
          // self.initDownYzzd();
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initLeftFolder(() => {
        this.initPage();
      });
    });
  },
};
</script>

<style scoped>
.flex {
  display: flex;
}

.flex .flex-left {
  width: 350px;
  margin-right: 10px;
}

.flex .flex-right {
  flex: 1;
}

.flex .flex-right .flex-right-item {
}

.flex .flex-left .navigationBar {
  height: 36px;
  line-height: 36px;
  background-color: #fff;
  margin-top: 10px;
}

.flex .flex-left .flex-tree {
  background-color: #fff;
  margin-top: 10px;
  height: calc(100vh - 148px);
  overflow-y: auto;
}
.flex .flex-left .flex-tree .delete {
  color: red;
  float: right;
  margin-top: 9px;
  cursor: pointer;
}
.flex .flex-left .flex-tree .edit {
  color: blue;
  float: right;
  margin-top: 9px;
  cursor: pointer;
  margin-right: 10px;
}
.flex .flex-left .flex-tree .tree-item {
  height: 32px;
  line-height: 32px;
  margin: 5px 10px;
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
}
.flex .flex-left .flex-tree .tree-item:hover {
  background-color: #e4f1fe;
}
.flex .flex-left .flex-tree .hover {
  background-color: #e4f1fe;
}

.flex .flex-left .navigationBar label {
  text-align: left;
  font-size: 16px;
  color: #333;
  margin-left: 10px;
}

.flex .flex-left .navigationBar span {
  float: right;
  margin-right: 10px;
  color: #333;
  cursor: pointer;
}

.singleTable {
  margin-bottom: 20px;
}
.singleBtn {
  position: absolute;
  bottom: 8px;
  right: 9px;
}

.select {
  font-size: 14px;
  line-height: 30px;
  padding: 5px 10px;
}

.select .item {
  display: inline-block;
  padding: 0px 10px;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.selectMain {
  height: 515px;
}
.selectMain .selectLeft {
  width: 35%;
  float: left;
}

.selectMain .selectLeft .selectLeftWrapper {
  margin: 10px;
  border: 1px solid #ebeef5;
  padding: 10px;
  height: 478px;
  overflow-y: auto;
}

.selectMain .selectRight {
  width: 65%;
  float: left;
}
.itemDiv {
  display: inline-block;
}
</style>
